<template>
  <van-cell-group>
    <!-- 评论头部 -->
    <van-cell title="商品评价" :value="`好评率 ${state.replyChance}%`" />
    <!-- 评论分类 -->
    <van-cell class="tags">
      <template #title>
        <van-button
          size="small"
          :class="{ active: state.isSum }"
          @click="changeType('0')"
        >
          全部 ({{ state.sumCount }})
        </van-button>
        <van-button
          size="small"
          :class="{ active: state.isGood }"
          @click="changeType('1')"
        >
          好评 ({{ state.goodCount }})
        </van-button>
        <van-button
          size="small"
          :class="{ active: state.isIn }"
          @click="changeType('2')"
        >
          中评 ({{ state.inCount }})
        </van-button>
        <van-button
          size="small"
          :class="{ active: state.isPoor }"
          @click="changeType('3')"
        >
          差评 ({{ state.poorCount }})
        </van-button>
      </template>
    </van-cell>
    <!-- 评论列表，v-if 与 v-for 不能同时使用，所以在外层包裹了一层 div
      当评论数据存在时，再加载评论项目组件
    -->
    <div v-if="state.isComment">
      <CommentItem
        v-for="reply in state.commentData"
        :key="reply.id"
        :userReply="reply"
      />
    </div>
    <!-- 评论列表数据不存在，加载空白状态 -->
    <van-empty description="目前还没有评论哦！" v-else/>
  </van-cell-group>
</template>
<script setup>
import { reactive, computed } from 'vue'
import { getCommentCounts, getCommentByType } from '@/api/products.js'
import CommentItem from '@/components/CommentItem.vue'

// 1. 获取到父组件传递来的商品 id
const { productId } = defineProps({
  productId: {
    type: String,
    required: true
  }
})

// 2. 声明响应式对象，保存有关评论的所有数据
const state = reactive({
  commentCounts: {}, // 存储不同类型的评论数量对象
  // 通过计算属性获取到不同类型的评论数
  sumCount: computed(() => state.commentCounts?.sum_count || 0), // 全部评论数量
  goodCount: computed(() => state.commentCounts?.good_count || 0), // 好评数量
  inCount: computed(() => state.commentCounts?.in_count || 0), // 中评数量
  poorCount: computed(() => state.commentCounts?.poor_count || 0), // 差评数量
  replyChance: computed(() => state.commentCounts?.reply_chance || 100), // 好评率
  // 按照类型获取用户的评论数据
  commentData: [],
  type: '0', // 存储当前被点击类型的值
  // 使用计算属性，判断当前评论类型是否高亮显示，即类名 active 是否生效
  isSum: computed(() => state.type === '0'),
  isGood: computed(() => state.type === '1'),
  isIn: computed(() => state.type === '2'),
  isPoor: computed(() => state.type === '3'),
  isComment: computed(() => state.commentData.length || 0) // 评论列表数据是否存在
})

// 3. 发送请求获取不同评价类型的评论数量
async function initCommentCounts () {
  const { data } = await getCommentCounts(productId)
  if (data.status !== 200) { return }
  state.commentCounts = data.data
  console.log(data)
}
initCommentCounts()

// 4. 发送请求获取不同类型 type 对应的评论数据
// type 值是 String：'0' - 全部、'1' - 好评、'2' - 中评、'3' - 差评
async function initCommentByType (type) {
  const { data } = await getCommentByType(productId, type)
  if (data.status !== 200) { return }
  state.commentData = data.data
  console.log(data)
}
initCommentByType('0')

// 5. 点击评论分类按钮，改变 state.type，上线切换效果
function changeType (type) {
  state.type = type
  // 重新发送请求，获取对应类型的评论列表数据
  initCommentByType(state.type)
}
</script>
<style lang='scss' scoped>
// 评论分类样式
.tags {
  .van-button {
    border-radius: 15px;
    margin-right: 10px;
    height: 25px;
    &:hover {
      border-color: transparent;
      background-color: #FBC546;
    }
  }
  .active {
    background-color: #FBC546;
  }

}
</style>
